<template>
  <!-- 头部标签信息 -->
  <div class="homeHead">
    <HomeHead />
  </div>

  <!-- 商品模糊查询选框 -->
  <div class="homeSelectInput">
    <div class="selectInputModule">
      <span class="homeTitle">二手交易系统</span>
      <div class="selectInput">
        <el-input
          v-model="selectInput"
          @input="$emit('update', selectInput)"
          style="width: 350px"
          placeholder="搜索商品名称"
          clearable
        />
        <el-button
          type="primary"
          style="
            border-radius: 0px;
            background-color: #04949e;
            border-color: #04949e;
          "
          :icon="Search"
          @click="offerSearch"
          >搜索</el-button
        >
      </div>
    </div>
  </div>

  <!-- 分类导航栏 -->
  <div class="userMenuModule">
    <UserMenu />
  </div>

  <!-- 商品数据展示 -->
  <div class="shopDataModule">
    <div class="shopTitleModule">
      <span>当前位置： 首页 >> 商业列表</span>
    </div>

    <div class="datasModule">
      <!-- 商品数据导航栏 -->
      <div class="shopDataMenu">
        <a>商品信息类别</a>
        <div class="shopMenuLink"></div>

        <div class="selectShop">
          <!-- 实现各属性效果 -->
          <div
            class="attribute"
            v-for="(attribute, attributeName) in attributes"
            :key="attributeName"
          >
            <a class="attributeName">{{ attributeName }}</a>
            <div :id="attribute.id" :class="attribute.class">
              <i
                v-for="(item, index) in attribute.items"
                :key="index"
                @click="handleClick(item, attribute.id)"
              >
                {{ item }}
              </i>
            </div>
          </div>
        </div>
      </div>

      <!-- 商品展示卡片序列 -->
      <div class="shopDataShow">
        <div class="dataShowModule">
          <div
            class="dataCardModule"
            v-for="(offer, index) in offerList"
            :key="index"
          >
            <img :src="offer.offerImage" alt="Image description" />
            <div class="dataCardTest">
              <span>{{ offer.offerName }}</span>
              <span>{{ offer.offerStyle }}</span>
              <span>{{ offer.finalPrice }}元</span>
              <el-button style="danger" @click="cartAdd(offer)"
                >加入购物车</el-button
              >
            </div>
          </div>
        </div>

        <!-- 分页数据模块 -->
        <div class="pagiNation">
          <el-pagination
            :page-size="8"
            :pager-count="5"
            :current-page="pageNum.value"
            layout="prev, pager, next"
            :total="totalNum"
            @current-change="currentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HomeHead from "../components/HomeHead.vue";
import UserMenu from "@/components/UserMenu.vue";
import { attributes } from "../assets/attributes.js";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import request from "@/request/axios";
import { onMounted, ref } from "vue";
import router from "@/router";

export default {
  components: { HomeHead, UserMenu },
  setup() {
    let pageNum = ref(1);
    let totalNum = ref(0);
    let selectInput = ref("");
    let offerList = ref();

    let selectLocal = ref(null);
    let selectStyle = ref(null);
    let minPrice = ref(null);
    let maxPrice = ref(null);
    let selectDegree = ref(null);
    let selectDiscount = ref(null);

    const offerQuery = () => {
      request
        .post("/home/offerQuery", {
          offerLocal: selectLocal.value,
          offerStyle: selectStyle.value,
          minPrice: minPrice.value,
          maxPrice: maxPrice.value,
          offerDegree: selectDegree.value,
          offerDiscount: selectDiscount.value,
          pageNum: pageNum.value,
          pageSize: 8,
        })
        .then((res) => {
          if (res.code === "200") {
            offerList.value = res.data.data;
            totalNum.value = res.data.total;
          } else {
            tableData.value = [];
            ElMessage.warning(res.msg);
          }
        });
    };

    onMounted(offerQuery);

    const offerSearch = () => {
      request
        .post("/home/offerSearch", {
          searchStr: selectInput.value,
          pageNum: pageNum.value,
          pageSize: 8,
        })
        .then((res) => {
          if (res.code === "200") {
            offerList.value = res.data.data;
            totalNum.value = res.data.total;
            selectInput.value = "";
          } else {
            tableData.value = [];
            ElMessage.warning(res.msg);
          }
        });
    };

    const changeNull = (selectedValue) => {
      let variables = {
        selectLocal: selectLocal,
        selectStyle: selectStyle,
        minPrice: minPrice,
        maxPrice: maxPrice,
        selectDegree: selectDegree,
        selectDiscount: selectDiscount,
      };
      if (selectedValue === "priceRange") {
        selectLocal.value = null;
        selectStyle.value = null;
        selectDegree.value = null;
        selectDiscount.value = null;
      } else {
        for (let variable in variables) {
          if (variable !== selectedValue) {
            variables[variable].value = null;
          }
        }
      }
    };

    const handleClick = (item, id) => {
      if (id === "province") {
        selectLocal.value = item;
        changeNull("selectLocal");
      } else if (id === "degree") {
        selectDegree.value = item;
        changeNull("selectDegree");
      } else if (id === "style") {
        selectStyle.value = item;
        changeNull("selectStyle");
      } else if (id === "discount") {
        selectDiscount.value = item;
        changeNull("selectDiscount");
      } else if (id === "price") {
        let priceRange = item.split("-");
        if (priceRange[1] === "以上") {
          minPrice.value = parseFloat(priceRange[0]);
          maxPrice.value = 999999;
        } else {
          minPrice.value = parseFloat(priceRange[0]);
          maxPrice.value = parseFloat(priceRange[1]);
        }
        changeNull("priceRange");
      }
      offerQuery();
    };

    const currentChange = (current) => {
      pageNum.value = current;
      offerQuery();
    };

    const cartAdd = (offer) => {
      console.log(offer);
      console.log(offer.offerUser);
      console.log(offer.offerLocal);
      console.log(offer.offerID);
      if (localStorage.getItem("user")) {
        if (
          offer.offerUser ===
          JSON.parse(localStorage.getItem("user")).data.userID
        ) {
          ElMessage.warning("该用户是当前商品出售人");
        } else {
          request
            .post("/home/cartAdd", {
              offerID: offer.offerID,
              offerImage: offer.offerImage,
              offerName: offer.offerName,
              offerStyle: offer.offerStyle,
              offerPrice: offer.offerPrice,
              offerLocal: offer.offerLocal,
              offerDiscount: offer.offerDiscount,
              offerDegree: offer.offerDegree,
              finalPrice: offer.finalPrice,
              offerUser: offer.offerUser,
              cartUser: JSON.parse(localStorage.getItem("user")).data.userID,
            })
            .then((res) => {
              if (res.code === "200") {
                ElMessage.success("加入购物车成功");
                offerQuery();
              } else {
                ElMessage.error(res.msg);
              }
            });
        }
      } else {
        ElMessage.error("用户未登录！");
        router.push("/userlogin");
      }
    };

    return {
      Search,
      pageNum,
      totalNum,
      cartAdd,
      selectInput,
      attributes,
      offerList,
      offerQuery,
      currentChange,
      selectLocal,
      selectStyle,
      minPrice,
      maxPrice,
      selectDegree,
      selectDiscount,
      handleClick,
      offerSearch,
      changeNull,
    };
  },
};
</script>

<style>
body {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

/* 商品信息输入模块 */
.homeSelectInput {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 10%;
}

.selectInputModule {
  display: flex;
  align-items: center;
  width: 80%;
  height: 90%;
}

.homeTitle {
  display: flex;
  width: 35%;
  height: 100%;
  align-items: center;
  justify-content: center;
  /* font-family: "阿里妈妈刀隶体 Regular"; */
  font-size: 30px;
  font-weight: 600;
  color: #04949e;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

/* @font-face {
  font-family: "阿里妈妈刀隶体 Regular";
  font-weight: 400;
  src: url("//at.alicdn.com/wf/webfont/8nkNB4zy4gRH/ZZOtDoyBAzw0.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/8nkNB4zy4gRH/do2ZJIJo82p0.woff")
      format("woff");
  font-display: swap;
} */

.selectInput {
  display: flex;
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  border: 3px solid #04949e;
}

.shopDataModule {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 80vh;
  background-color: #dbe2eb;
}

.shopTitleModule {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 5%;
  background-color: #ffffff;
}

.shopTitleModule span {
  width: 98%;
  height: 95%;
  border-bottom: 3px solid #04949e;
  color: #04949e;
  font-size: 22px;
}

.dataModule {
  display: flex;
  flex-direction: row;
  width: 80%;
  height: 100%;
}

.shopDataMenu {
  display: flex;
  flex-direction: column;
  width: 20%;
  height: 90%;
  margin-top: 2%;
  background-color: #ffffff;
}

.shopDataMenu a {
  margin-top: 3%;
  margin-left: 8%;
  font-family: "宋体";
  font-size: 20px;
  font-weight: 600;
}

.shopMenuLink {
  width: 100%;
  height: 0.2px;
  margin-top: 2%;
  background-color: #04949e;
}

.selectShop {
  margin-top: 2%;
  overflow: hidden;
}

.attribute {
  display: flex;
  flex-direction: column;
}

.attributeName {
  margin-left: 5%;
  margin-block: 0.5%;
  font-size: 1.1vw;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
}

.selectModule {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-left: 5%;
  flex-wrap: wrap;
}

.attribute i {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9vw;
  font-style: normal;
  margin-inline: 1%;
  margin-block: 1.4%;
}

.attribute div {
  margin-inline: 2%;
  margin-block: 2%;
}

.attribute i:hover {
  background-color: #04949e;
  border-radius: 8px;
}

.shopDataShow {
  display: flex;
  flex-direction: column;
  width: 80%;
  height: 100%;
}

.dataShowModule {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: center;
  align-items: center;
  width: 100%;
  height: 95%;
}

.dataCardModule {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95%;
  height: 95%;
}

.dataCardModule img {
  margin-block: 2.5%;
  width: 80%;
  height: 95%;
}

.dataCardTest {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: center;
  width: 95%;
  height: 15%;
  margin: 2.5%;
}

.data .pagiNation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5%;
  width: 100%;
}
</style>